<template>
	<view class="canvasPoint">
		<view style="position: relative;width: 100vw;height: 100vh;">
			<canvas
				class="handWriting"
				:disable-scroll="true"
				@touchstart="uploadScaleStart"
				@touchmove="uploadScaleMove"
				@touchend="uploadScaleEnd"
				canvas-id="handWriting"
			></canvas>
			<view :disable-scroll="true" class="wordsPos" v-for="(im, ix) in wordsList" :key="ix" :style="im.style" @touchmove.stop.preven="(event) => {wordsClick(event,ix)}">
				{{im.words}}
			</view>
		</view>
		<button type="default" style="position: fixed;top: 0;right: 0;" @click="wordsSetting">wordsSetting</button>
		<!-- <button type="default" @click="ygSetting">荧光</button>
		<button @click="backCanvas" class="backBtn">回退</button>
		<button @click="nextCanvas" class="backBtn">恢复</button>
		<button @click="lineColor='black'">黑</button>
		<button @click="lineColor='green'">绿</button>
		<button @click="lineColor='blue'">蓝</button>
		<button @click="lineColor='red'">红</button>
		<button @click="lineSize+=6">加</button>
		<button @click="lineSize-=6">减</button> -->
		
		
		
		<uni-popup ref="wordsPopup" type="dialog">
		    <uni-popup-dialog mode="input" title="请输入文字" :duration="2000" :before-close="true" @close="wordsClose" @confirm="wordsConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<!-- <button @click="isShadow = !isShadow">荧</button> -->
	</view>
</template>

<script>
	export default{
		name: 'canvasPoint',
		data () {
			return {
				ctx: null,					// canvas操作实例
				lineColor: 'black',			// 画笔颜色
				lineSize: 2,				// 画笔大小
				lineHistory: [],			// 画笔历史路径
				historyPointer: -1,			// 记录回退按钮
				lineNow: [],				// 画笔当前路径
				action: 'pen',				// pen 铅笔 ygpen 荧光笔 text 文字 rubber 橡皮擦
				move: [],					// 文字拖动位置
				wordsList:[]
			}
		},
		onReady() {
			let ctx = uni.createCanvasContext('handWriting', this);
			this.ctx = ctx;
		},
		watch:{
			historyPointer(){
			}
		},
		methods: {
			wordsClick(event,ix){
				console.log(event,ix)
				// this.wordsList[ix].style.top = event.touches[0].pageY +'rpx'
				// this.wordsList[ix].style.left = event.touches[0].pageX +'rpx'
				
				this.wordsList[ix].style.top = (event.touches[0].pageY + event.currentTarget.offsetTop) +'rpx'
				this.wordsList[ix].style.left = (event.touches[0].pageX + event.currentTarget.offsetLeft) +'rpx'
				
				this.$forceUpdate()
			},
			// 文字
			wordsSetting(){
				console.log(111)
				this.$refs.wordsPopup.open()
			},
			wordsConfirm(value){
				console.log(value)
				
				this.wordsList.push({
					words: value,
					style: {
						top: '200rpx',
						left: '20rpx'
					}
				})
				
				const { ctx } = this
				/* // 保存当前绘制的上下文
				ctx.save()
				// 设置颜色
				ctx.fillStyle = "#ff0";
				// 设置水平对齐方式
				ctx.textAlign = "center";
				// 设置文字内容以及坐标
				ctx.fillText(value, 20, 20)
				ctx.draw(true)
				// 恢复canvas
				ctx.restore() */
				
				this.$refs.wordsPopup.close()
			},
			wordsClose(done){this.$refs.wordsPopup.close()},
			// 荧光
			ygSetting(){
				this.action == 'ygpen' ? this.action = 'pen' : this.action = 'ygpen'
			},
			// 回退
			backCanvas(){
				if(this.historyPointer == -1){
					return
				}
				this.historyPointer -= 1
				this.reDraw()
			},
			// 恢复回退内容
			nextCanvas(){
				if(this.historyPointer == this.lineHistory.length - 1){return}
				this.historyPointer += 1
				this.reDraw()
			},
			// 清除画布重新绘制
			reDraw(){
				const {ctx} = this
				
				// 清除画布
				ctx.clearRect(0, 0, 99999, 99999)
				ctx.draw(true)
				
				// 循环历史笔迹
				for(let i = 0; i <= this.historyPointer; i++){
					this.pointLine(this.lineHistory[i])
				}
				
			},
			// 画笔开始
			uploadScaleStart(e){
				
				console.log(e)
				
				this.lineNow = []
				
				const {ctx} = this
				 console.log(this.action,'this.actionthis.actionthis.action')
				// 第一位是起始点
				this.lineNow.push({
					lineX: e.touches[0].x,
					lineY: e.touches[0].y,
					color: this.lineColor,
					lineSize: this.lineSize,
					action: this.action
				})
				this.pointLine(this.lineNow)
				
				// ctx.beginPath()
				// ctx.moveTo(this.lineNow[0].lineX, this.lineNow[0].lineY);
				
			},
			// 画笔移动
			uploadScaleMove(e){
				const { ctx } = this
				
				this.lineNow.push({
					lineX: e.touches[0].x,
					lineY: e.touches[0].y
				})
				this.pointLine(this.lineNow)

			},
			// 画笔结束
			uploadScaleEnd(e){
				
				if(this.historyPointer < this.lineHistory.length-1){
					let tempFlag = this.lineHistory.length - this.historyPointer
					for(let i = tempFlag - 1; i; i-- ){
						this.lineHistory.pop()
					}
				}
				this.historyPointer++
				this.lineHistory.push(this.lineNow)
				
			},
			// 画线条
			pointLine(lineNow, x, y, type){
				const { ctx } = this
				
				// 笔迹起点
				ctx.beginPath()
				// moveto 将坐标移到xy轴
				ctx.moveTo(lineNow[0].lineX, lineNow[0].lineY);
				ctx.setLineWidth(lineNow[0].lineSize)
				ctx.setFillStyle(lineNow[0].color);
				if(lineNow[0].action == 'ygpen'){
					ctx.setStrokeStyle('rgba(255, 255, 255, 1)')
					ctx.setShadow(5, 5, 20, lineNow[0].color)
					ctx.setGlobalAlpha(0.1)
				}else{
					ctx.setStrokeStyle(lineNow[0].color)
				}
				
				// 循环坐标
				lineNow.forEach((im, ix) => {
					this.ctx.lineTo(im.lineX, im.lineY)
					this.ctx.stroke()
				})
				this.ctx.draw(true)
				
				this.$forceUpdate()
			}
		}
	}
</script>

<style>
	.handWriting{
		width: 100vw;
		height: 100vh;
		border: 1rpx solid #007AFF;
		background: rgba($color);
		position: absolute;
		left: 0;
		top: 0;
	}
	.wordsPos{
		color: #007AFF;
		position: absolute;
	}
</style>
